<template>
	<div class="UserMag my-app">
		<h2 class="my-h2">职员信息 / 列表</h2>
		<order-nav :activelist="activelist"></order-nav>
		<div class="my-form-item">
			<com-table :ComTable="ComTable" @ComTablesondata="ComTablesondata"></com-table>
			<page :page="pageList"></page>
		</div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
			<el-radio v-model="radioDialog" label="1">分配权限</el-radio>
			<el-radio v-model="radioDialog" label="2">设置状态</el-radio>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="设置状态" :visible.sync="dialogPowerVisible" width="30%" center>
			是否删除该员工
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogPowerVisible = false;radioDialog=0;">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="分配权限" :visible.sync="dialogStatusVisible" center>
			<div style="width: 100%;text-align: left;padding-left: 50px;box-sizing: border-box;">
				<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">最高权限</el-checkbox>
			</div>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="(city,key,index) in cities" :label="city.status" :key="index">{{city.label}}</el-checkbox>
			</el-checkbox-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogStatusVisible = false;radioDialog=0;">取 消</el-button>
				<el-button type="primary" @click="updateStatus">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import OrderNav from "../../../components/OrderNav.vue";
	export default {
		components: {
			OrderNav,
		},
		data() {
			return {
				keywords: '',
				department: '',
				pageList: {},
				activelist: [{
						id: 0,
						index: 1,
						name: "已审核用户",
						router: false
					},
					{
						id: 1,
						index: 2,
						name: "未审核用户",
						router: false
					},
					{
						id: 2,
						index: '',
						name: "全部用户",
						router: false
					},

				],
				radioDialog: 0,
				radioDialogPower: 0,
				dialogVisible: false,
				dialogPowerVisible: false,
				dialogStatusVisible: false,
				checkAll: false,
				checkedCities: [],
				cities: [{
					status: '2',
					label: '职员管理'
				}, {
					status: '3',
					label: '订单管理'
				}, {
					status: '4',
					label: '产品管理'
				}, {
					status: '5',
					label: '财务管理'
				}, {
					status: '6',
					label: '平台服务'
				}],
				isIndeterminate: true,
				ComTable: {
					showsummary: false,
					header: "headercolor",
					title: [{
						width: '50px',
						label: '序号',
						prop: 'id',
						rowclass: "rowclass"
					}, {
						label: '职员姓名',
						prop: 'name'
					}, {
						width: '110px',
						label: '手机号码',
						prop: 'phone'
					}, {
						label: '登录账号',
						prop: 'account',
					}, {
						label: '权限级别',
						prop: 'statustext',
						type: 'list'
					}, {
						width: '80px',
						label: '审核状态',
						prop: 'job_statustext',
					}, {
						label: '所属部门',
						prop: 'department',
					}, {
						width: '150px',
						label: '注册时间',
						prop: 'insert_time',
					}, {
						prop: 'id',
						label: '操作',
						type: "btn",
						btnlist: [{
							router: true,
							id: "/UserSet/audit",
							color: "",
							text: "审核",
						}, {
							router: false,
							id: "root",
							color: "",
							text: "权限",
						}, ]
					}, ],
					tableData: [],
					multipleSelection: []
				},
				tableData: {
					status: [],
					id: '',
				},
			}
		},
		computed: {
			...mapGetters([
				'LabelInput',
				'res_userList',
				'token',
				'orderselectindex'
			])
		},
		created() {
			this.getorderselectindex(1)
		},
		mounted() {
			this.userList()
		},
		methods: {
			...mapActions({
				setLabelInput: "setLabelInput",
				getpage: 'getpage',
				getres_userList: 'getres_userList',
				getres_userrow: 'getres_userrow',
				getorderselectindex: 'getorderselectindex'
			}),
			contentUe(value) {},
			ComTablesondata(i) {
				if (i.btnlist.router) {
					this.$api.GetgetCompanyUserInfo({
							token: this.token,
							id: i.row.id
						})
						.then(res => {
							if (res.code === 200) {
								res.result.id = i.row.id;
								this.getres_userrow(res.result)
								this.$router.push(i.btnlist.id)
							} else {

								this.$alert(res.meg, '提示', {
									confirmButtonText: '确定',
								});
							}
						})
				}
				if (i.btnlist.id === 'root') {
					this.tableData.id = i.row.id;
					this.dialogVisible = true;
				}
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? ['1', '2', '3', '4', '5', '6', ] : [];
				this.isIndeterminate = false;
				this.tableData.status = ['1'];
			},
			handleCheckedCitiesChange(value) {
				this.checkedCities = value;
				this.tableData.status = value;
				let checkedCount = value.length;
				this.checkAll = false;
				// this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			},
			userList() {
				this.$api.GetUserList({
						token: this.token,
						// 						keywords: this.keywords,
						// 						department: this.department,
						job_status: this.orderselectindex
					})
					.then(res => {
						if (res.code === 200) {
							this.getres_userList(res.result.data);
							for (var i = 0; i < this.res_userList.length; i++) {
								if (this.res_userList[i].job_status === 1) {
									this.res_userList[i].job_statustext = "在职"
								}
								if (this.res_userList[i].job_status === 2) {
									this.res_userList[i].job_statustext = "不在职"
								}
								var statustext = [];
								for (var s = 0; s < this.res_userList[i].status.length; s++) {
									if (this.res_userList[i].status[s] === '1') {
										statustext.push('最高权限')
									}
									if (this.res_userList[i].status[s] === '2') {
										statustext.push('职员管理')
									}
									if (this.res_userList[i].status[s] === '3') {
										statustext.push('订单管理')
									}
									if (this.res_userList[i].status[s] === '4') {
										statustext.push('产品管理')
									}
									if (this.res_userList[i].status[s] === '5') {
										statustext.push('财务管理')
									}
									if (this.res_userList[i].status[s] === '6') {
										statustext.push('平台服务')
									}
								}
								this.res_userList[i].statustext = statustext;
							}
							this.ComTable.tableData = this.res_userList;
							this.pageList = {
								total: res.result.total, // String 总共数据条数
								per_page: res.result.per_page, // String 每页数据条数
								current_page: res.result.current_page, // String 当前第几页
								last_page: res.result.last_page, // String 最后一页
							}

						}
					})
			},
			// 修改权限
			updateStatus() {
				this.dialogPowerVisible = false;
				this.update = {
					token: this.token, //String header传入
					status: this.tableData.status, //Number 权限值1系统管理2验票员3财务 允许值: 1, 2, 3
					id: this.tableData.id, //Int 员工ID
				}
				this.$api.GetupdateStatus(this.update)
					.then(res => {

						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								this.radioDialog = 0;
								if (res.code === 200) {
									this.dialogStatusVisible = false;
									this.userList();
								}
							}
						});

					})
			},
			// 删除职员
			deleteRow() {
				this.$api.GetDeleteUser({
						token: this.token,
						id: this.tableData.id
					})
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								this.radioDialog = 0;
								if (res.code === 200) {
									this.userList();
									this.dialogPowerVisible = false;
								}
							}
						});
					})
			},
		},
		watch: {
			orderselectindex(newValue, oldValue) {
				this.userList();
			},
			radioDialog(newValue, oldValue) {
				//分配权限
				if (newValue === '1') {
					this.dialogVisible = false;
					this.dialogStatusVisible = true;
				}
				if (newValue === '2') {
					this.dialogVisible = false;
					this.dialogPowerVisible = true;
				}
			},
			radioDialogPower(newValue, oldValue) {
				//分配权限
				if (newValue === '1') {
					this.dialogPowerVisible = false;
				}
			}
		},
	}
</script>

<style lang="less">
	.UserMag {
		width: 100%;
		box-sizing: border-box;
	}
</style>
